<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" href="/resources/css/weui.min.css"/>
    <link rel="stylesheet" href="/resources/css/myweui.css"/>
    <title>Hello world</title>
    <script type="text/javascript" src="/resources/js/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('App', []);

        app.directive('whenScrolled', function() {
            return function(scope, element, attr) {
                var raw = element[0];
                element.bind('scroll', function() {
                    if (raw.scrollTop+raw.offsetHeight >= raw.scrollHeight) {
                        scope.$apply(attr.whenScrolled);
                    }
                });
            };
        });

        app.controller('Controller', function ($scope)
        {
            $scope.loadMore = function() {
                console.log("success");
            };
        });

    </script>
</head>
<body>
<div ng-app='App'>
    <div ng-controller='Controller'>

        <div when-scrolled="loadMore()" style="position: absolute;width: 100%;height: 100%;overflow-y: auto;">
            <ul>
                <li>Pretty row 1</li>
                <li>Pretty row 2</li>
                <li>Pretty row 3</li>
                <li>Pretty row 4</li>
                <li>Pretty row 5</li>
                <li>Pretty row 6</li>
                <li>Pretty row 7</li>
                <li>Pretty row 8</li>
                <li>Pretty row 9</li>
                <li>Pretty row 10</li>
                <li>Pretty row 11</li>
                <li>Pretty row 12</li>
                <li>Pretty row 13</li>
                <li>Pretty row 14</li>
                <li>Pretty row 15</li>
                <li>Pretty row 16</li>
                <li>Pretty row 17</li>
                <li>Pretty row 18</li>
                <li>Pretty row 19</li>
                <li>Pretty row 20</li>
                <li>Pretty row 21</li>
                <li>Pretty row 22</li>
                <li>Pretty row 23</li>
                <li>Pretty row 24</li>
                <li>Pretty row 25</li>
                <li>Pretty row 26</li>
                <li>Pretty row 27</li>
                <li>Pretty row 28</li>
                <li>Pretty row 29</li>
                <li>Pretty row 30</li>
                <li>Pretty row 31</li>
                <li>Pretty row 32</li>
                <li>Pretty row 33</li>
                <li>Pretty row 34</li>
                <li>Pretty row 35</li>
                <li>Pretty row 36</li>
                <li>Pretty row 37</li>
                <li>Pretty row 38</li>
                <li>Pretty row 39</li>
                <li>Pretty row 40</li>
            </ul>
        </div>
    </div>


</div>
<div id="footer"></div>
</body>
</html>
      